<template>
  <div class="chat-input-container">
    <div class="input-wrapper">
      <textarea
        v-model="inputValue"
        :placeholder="placeholder"
        :disabled="disabled"
        @keydown.enter.prevent="handleEnterKey"
        @input="handleInput"
        class="chat-input"
        rows="1"
        ref="inputRef"
      ></textarea>
      <div class="input-actions">
        <!-- 语音录制按钮 -->
        <VoiceButton
          :max-duration="60"
          language="zh"
          :disabled="disabled || loading"
          @transcriptionUpdate="handleTranscriptionUpdate"
          @recordingStart="handleRecordingStart"
          @recordingStop="handleRecordingStop"
          @error="handleVoiceError"
          class="voice-btn"
        />

        <!-- 发送按钮 -->
        <Button
          type="primary"
          shape="circle"
          size="large"
          :loading="loading"
          :disabled="!inputValue.trim() && !isVoiceRecording || disabled"
          @click="handleSend"
          class="send-btn"
        >
          <Send v-if="!loading" :size="18" />
        </Button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { Button } from 'ant-design-vue'
import { Send } from 'lucide-vue-next'
import VoiceButton from '@/components/RoleChat/VoiceButton.vue'

interface Props {
  modelValue: string
  placeholder?: string
  disabled?: boolean
  loading?: boolean
  isVoiceRecording?: boolean
}

interface Emits {
  'update:modelValue': [value: string]
  'send': []
  'input': []
  'transcription-update': [text: string, audioUrl: string]
  'recording-start': []
  'recording-stop': []
  'voice-error': [error: any]
}

const props = withDefaults(defineProps<Props>(), {
  placeholder: '输入消息...',
  disabled: false,
  loading: false,
  isVoiceRecording: false
})

const emit = defineEmits<Emits>()

const inputRef = ref<HTMLTextAreaElement>()
const inputValue = ref(props.modelValue)

// 监听外部值变化
watch(() => props.modelValue, (newValue) => {
  inputValue.value = newValue
})

// 监听内部值变化并向外发射
watch(inputValue, (newValue) => {
  emit('update:modelValue', newValue)
})

const handleInput = () => {
  emit('input')
}

const handleSend = () => {
  if ((inputValue.value.trim() || props.isVoiceRecording) && !props.disabled) {
    emit('send')
  }
}

const handleTranscriptionUpdate = (text: string, audioUrl: string) => {
  inputValue.value = text
  emit('transcription-update', text, audioUrl)
}

const handleRecordingStart = () => {
  emit('recording-start')
}

const handleRecordingStop = () => {
  emit('recording-stop')
}

const handleVoiceError = (error: any) => {
  emit('voice-error', error)
}

const handleEnterKey = (event: KeyboardEvent) => {
  if (event.shiftKey) return
  event.preventDefault()
  handleSend()
}

// 暴露方法给父组件
defineExpose({
  focus: () => {
    if (inputRef.value) {
      inputRef.value.focus()
    }
  },
  clear: () => {
    inputValue.value = ''
  }
})
</script>

<style scoped>
/* 聊天输入区域样式 */
.chat-input-container {
  padding: 16px;
  background: #ffffff;
  border-top: 1px solid #f0f0f0;
  border-radius: 0 0 12px 12px;
  flex-shrink: 0;
}

.input-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 24px;
  border: 1px solid #e9ecef;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.input-wrapper:hover {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

.input-wrapper:focus-within {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.chat-input {
  flex: 1;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;
  line-height: 1.5;
  resize: none;
  min-height: 24px;
  max-height: 120px;
  overflow-y: auto;
  font-family: inherit;
  padding: 8px 0;
  vertical-align: center;
}

.chat-input:focus {
  outline: none;
  border: none;
  box-shadow: none;
}

.chat-input::placeholder {
  color: #9ca3af;
}

.input-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.voice-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: #f3f4f6;
  color: #6b7280;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.voice-btn:hover {
  background: #e5e7eb;
  color: #374151;
  transform: scale(1.05);
}

.send-btn {
  width: 40px;
  height: 40px;
  background: #6366f1 !important;
  border-color: #6366f1 !important;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.send-btn:hover {
  background: #5855eb !important;
  border-color: #5855eb !important;
  transform: scale(1.05);
}

.send-btn:disabled {
  background: #d1d5db !important;
  border-color: #d1d5db !important;
  transform: none;
}

.send-btn:active {
  transform: scale(0.95);
}
</style>
